<template>
  <div
    @click="$emit('toggleMenu')"
    class="el-date-editor el-date-editor--timerange el-input__wrapper el-range-editor el-tooltip__trigger el-tooltip__trigger"
  >
    <i class="el-icon el-input__icon el-range__icon">
      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path
          fill="currentColor"
          d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
        ></path>
        <path
          fill="currentColor"
          d="M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32z"
        ></path>
        <path fill="currentColor" d="M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32z"></path>
      </svg>
    </i>
    <input
      autocomplete="off"
      readonly="readonly"
      :value="leftTime"
      name=""
      :placeholder="$attrs['start-placeholder']"
      class="el-range-input"
    />
    <span class="el-range-separator">{{ $attrs['range-separator'] || '~' }}</span>
    <input
      autocomplete="off"
      readonly="readonly"
      :value="rightTime"
      name=""
      :placeholder="$attrs['end-placeholder']"
      class="el-range-input"
    />
    <el-icon
      v-show="modelValue && modelValue[0]"
      @click.stop="$emit('clear')"
      class="el-icon el-input__icon el-range__close-icon"
      ><CircleClose
    /></el-icon>
  </div>
</template>

<script>
  import dayjs from 'dayjs';
  /** 样式组件-下拉选择器 */
  export default {
    name: 'StyleTimePicker',
    emits: ['toggleMenu', 'clear'],
    props: {
      modelValue: {
        type: [Array, String],
        default: [],
      },
    },
    data() {
      return {};
    },
    computed: {
      leftTime() {
        if (!(Array.isArray(this.modelValue) && this.modelValue[0])) {
          return;
        }
        return dayjs(this.modelValue[0]).format(this.$attrs.format || 'HH:mm');
      },
      rightTime() {
        if (!(Array.isArray(this.modelValue) && this.modelValue[1])) {
          return;
        }
        return dayjs(this.modelValue[1]).format(this.$attrs.format || 'HH:mm');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .el-date-editor.el-input__wrapper {
    width: inherit;
    .el-range__close-icon {
      opacity: 0;
      visibility: hidden;
    }
    &:hover {
      .el-range__close-icon {
        opacity: 1;
        visibility: inherit;
      }
    }
  }
</style>
